import QtQuick 1.0
import "../models"
//import "../js/main.js" as MainManager

Rectangle {
    id: choiceList;
     color: "#00ffffff";
    property variant itemsList: itemsList
    property alias listModel: itemsList.model
    property alias listDelegate: itemsList.delegate

    property alias borderSrc: listBorder.source

    /** Collapse/Expand properties **/
    property bool collapsed: true
    property int collapsedHeight: 50;
    property int expandedHeight: 200;
    property alias ddArrowVisibility: dropDownArrow.visible
    property int duration: 500;
    property int selectedMU: 1;


    /** Border **/
    BorderImage {
        id: listBorder
        x: 0; y: 0
        anchors.fill: parent;
        border.left: 20; border.right:20;
        border.top: 20; border.bottom:20;
        source: "../images/TextInput_default.png";
    }

    Image {
        id: dropDownArrow
        source: "../images/DropDown_arrow.png";
        anchors {
            right: parent.right; rightMargin: 10;
            verticalCenter: parent.verticalCenter
        }
        height: 8; width: 14
    }

    //Dalay the highlight/unhighlight on collapse/expand
    Timer {
        id: dalayTimer
        interval: parent.duration/2;
        onTriggered: parent.ddArrowVisibility =  true;
    }

    ListView {
        id: itemsList
        y: 40
        anchors{
            fill: parent;
            leftMargin: 20; rightMargin: 20
            topMargin: 10; bottomMargin: 10;
        }
        clip: true
        focus: true

        MouseArea{
            id: itemMouseArea;
            anchors.fill: parent
            onClicked: {
                if (choiceList.collapsed){
                    choiceList.state = "expandedState"
                    itemsList.currentItem.state = "highlightState";

                }else{
                    choiceList.state = "collapsedState"
                    itemsList.currentItem.state = "";
                    dalayTimer.start()
                }
                var totalHeight = parent.height / itemsList.visibleArea.heightRatio;
                var totalY = totalHeight * itemsList.visibleArea.yPosition;
                itemsList.currentIndex = itemsList.indexAt(0, totalY + mouseY);
                choiceList.selectedMU = itemsList.currentItem.muID;
            }
        }


        states: [
            State {
                name: "ShowBars"
                when: itemsList.movingVertically
                PropertyChanges { target: verticalScrollBar; opacity: 1 }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { properties: "opacity"; duration: 500 }
            },
            Transition {
                NumberAnimation { property: "x"; duration: 500 }
            }
        ]

        ScrollBar {
            id: verticalScrollBar
            width: 6; height: parent.height-6
            anchors.right: parent.right
            anchors.top: parent.top
            opacity: 0
            orientation: Qt.Vertical
            position: parent.visibleArea.yPosition
            pageSize: parent.visibleArea.heightRatio
        }
    }

    states: [
        State {
            name: "collapsedState"
            PropertyChanges {
                target: choiceList;
                collapsed: true;
                height: collapsedHeight;
                ddArrowVisibility: false
              }
        },
        State {
            name: "expandedState"
            PropertyChanges {
                target: choiceList;
                collapsed: false
                height: expandedHeight;
                ddArrowVisibility: false
            }
        }
    ]

    transitions: [
        Transition {
            NumberAnimation { properties: "height"; easing.type: Easing.InOutQuad; duration: duration }
        }
    ]


}
